<html>
	<head>
	<meta charset="utf-8">
	<title>时间</title>
		<style>
			body{
				height: 100%;
				background-color: black;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#time{
				color: yellow;
				font-size: 120px;
				/*只能显示电脑上已经安装过的字体*/
				font-family: Digital Dismay;
			}
			#date{
				color: red;
				font-size: 60px;
				font-family: 楷体;
			}
			div{
				text-align:center;
			}
		</style>
	</head>
	 <body>
		<main>
			<div id="time">12:12:12:12</div>
			<div id="date">2000年12月10日 星期一</div>
			</main>
			<script>
			function showtime(){
				var time = document.getElementById('time');
			//date()是系统提供给用户使用的函数.可以获取现在的时间
			var now = new Date();
			//从获取的时间中分别剥离时分秒
			var h = now.getHours();
			var m = now.getMinutes();
			var s = now.getSeconds();
			h = h<10?'0'+h:h;
			m = m<10?'0'+m:m;
			s = s<10?'0'+s:s;
			time.innerHTML = h+':'+m+':'+s;
			//分别获取年月日
			var date = document.getElementById('date');
			var Y = now.getFullYear();//获取年
			var M = now.getMonth()+1;//获取月,月份从零开始
			var D = now.getDate();
			var W = now.getDay();
			//switch是控制流程语句,用来选择一个变量的值,
			//可以根据这个变量的不同取值,执行不同的代码逻辑.
			//switch选择语句只会执行其中的一个case后面的代码,
			//当所有case都不成立时,执行default后面的代码,当遇到
			//break时立即跳出switch语句.
			switch(W){
				case 0:
				W = '星期日';
				break;
				case 1:
				W = '星期一';
				break;
				case 2:
				W = '星期二';
				break;
				case 3:
				W = '星期三';
				break;
				case 4:
				W = '星期四';
				break;
				case 5:
				W = '星期五';
				break;
				case6:
				W = '星期六';
				break;
				default:
				W = '你弄错了';
				break;
			}
			date.innerHTML = Y+'年'+M+'月'+D+'日'+W;
			}
			//函数需要调用才可以执行里面的代码
			showtime();
			//如果想要一只显示为正确的时间,就需要频繁调用showtime这个函数,
			//此时可以使用定时器去实现
			//要实现一些频繁重复调用的动作时,通常就用定时器
			//setInterval(A,B)表示一个定时器,每隔B毫秒执行一次A操作
			setInterval(showtime,1);
		</script>
			
	</body>
</html>